<template>
<div>
  <div class="institutions-management">
    机构管理
  </div>

  <el-input v-model="input4" class="w-50 m-2" placeholder="请输入关键字" size="large">
        <template #prefix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" size="large" class="btn" @click="creatjg">新增机构</el-button>
     
        <el-table
        stripe
        class="list"
      ref="multipleTableRef"
      :data="users"
      style="width: 100%"
      header-align="center"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" width="150" align="center">
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column property="jgphoto" label="机构图片" width="120" align="center"/>
      <el-table-column property="jgname" label="机构名称" width="250" align="center"/>
      <el-table-column property="username" label="负责人姓名" width="120" align="center"/>
      <el-table-column property="phone" label="电话" width="120" align="center"/>
      <el-table-column property="jgadress" label="机构地址" width="250" align="center"/>
      <el-table-column property="jgzt" label="状态" width="120" align="center">
        <el-switch
    v-model="value"
    active-color="#3DD4A7"
    inline-prompt
    size="large"
    active-text="启用"
    inactive-text="禁用"
  />
      </el-table-column>
    </el-table>
    
    <el-pagination background layout="prev, pager, next" :total="total"  @current-change="handlePageChange"/>

    </div> 
</template>


<script>

export default {
  name: 'InstitutionsManagement',
  data(){
      return{
        users: Array(15).fill(null).map((_, index) => ({
        "jgphoto": "图片" + index,
        "jgname": "北京市怀柔区洛西社区卫生服务站" + index,
        "username": "胡hh" + index,
        "phone": "138028344" + ('0' + index).slice(-2),
        "jgadress": "北京市怀柔区洛西县建设路990号" + index,
        "jgzt": "正常",
        "id": index + 1
      })),
      value:true,
      total:0,
      page:1,
      pageSize:10,
      }
    },
    created() {
      // const result = await findUsers()
      // console.log(result)
      this.pageSize=10
      this.total=this.users.length,
      this.page=Math.ceil(this.total/10)
      console.log(this.total)
      console.log(this.users)
      console.log(this.page)
    },
    methods: {
      creatjg(){
        console.log('111')
        this.$router.push('newjg')
      },
      handlePageChange(currentPage){
        console.log(currentPage)
      }
    },
}
</script>

<style  scoped>
/* body .el-table th.gutter{
    display:table-cell!important;
} */
.w-50{
  width: 300px;
  float: left;
  margin-bottom: 20px;
}
.btn{
  float: right;
}
.list{
  text-align: center;

}
.pages{
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
